<script setup>
import { onMounted } from 'vue'

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]

onMounted(() => {
  document.body.style.backgroundColor = '#8d8d8d'
})
</script>

<template>
  <div style="width: 95%; margin: 0 auto">
    <AlexTable :data="tableData">
      <AlexTableColumn :width="1" align="center" headerAlign="center">
        <template #header="scope">
          <!-- 自定义表头内容 -->
          {{ scope }} <span style="color: blueviolet">Name</span>
        </template>
        <template #default="scope">
          <!-- 表格单元格内容 -->
          {{ scope.row.name }}
        </template>
      </AlexTableColumn>

      <AlexTableColumn :width="2" align="left" headerAlign="center">
        <template #header> Address </template>
        <template #default="scope"> {{ scope.row.address }} </template>
      </AlexTableColumn>
      <AlexTableColumn prop="date" label="Date" :width="1" align="left" headerAlign="center" />
    </AlexTable>
  </div>
</template>

<style lang="scss" scoped>
.alex-table {
  border-collapse: separate;
  border-spacing: 0px 10px;

  :deep(.table-header) {
    background-color: #e6edf5;
    height: 2rem;

    border-radius: 0.6rem;
    tr th {
      &:first-child {
        border-top-left-radius: 0.6rem;
        border-bottom-left-radius: 0.6rem;
      }
      &:last-child {
        border-top-right-radius: 0.6rem;
        border-bottom-right-radius: 0.6rem;
      }
    }
  }

  :deep(.table-row) {
    background-color: #ff3f3f;
    border-radius: 0.3rem;
    overflow: hidden;
    height: 3rem;

    border-radius: 0.6rem;
    box-shadow: 0px 6px 10px 0px rgba(196, 203, 214, 0.878);

    &:hover {
      background: #f2f5ff;
      cursor: pointer;
    }
    td {
      padding: 1rem;
      box-sizing: border-box;
      &:first-child {
        border-top-left-radius: 0.6rem;
        border-bottom-left-radius: 0.6rem;
      }
      &:last-child {
        border-top-right-radius: 0.6rem;
        border-bottom-right-radius: 0.6rem;
      }
    }
  }
}
</style>
